<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>局域网文件传输</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CFC9',
            neutral: '#86909C',
            'neutral-light': '#F2F3F5',
            'neutral-dark': '#4E5969',
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .transition-height {
        transition: max-height 0.3s ease-in-out;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .bg-gradient-primary {
        background: linear-gradient(135deg, #165DFF 0%, #36CFC9 100%);
      }
    }
  </style>
</head>
<body class="font-inter bg-gray-50 text-neutral-dark min-h-screen flex flex-col">
  <!-- 导航栏 -->
  <nav class="bg-white shadow-md sticky top-0 z-50 transition-all duration-300">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
      <div class="flex items-center space-x-2">
        <i class="fa fa-exchange text-primary text-2xl"></i>
        <h1 class="text-xl font-bold text-primary">局域网文件传输</h1>
      </div>
      <div class="hidden md:flex items-center space-x-4">
        <span id="connection-status" class="flex items-center text-sm">
          <i class="fa fa-wifi text-green-500 mr-1"></i>
          <span>已连接</span>
        </span>
        <button id="help-btn" class="text-neutral hover:text-primary transition-colors duration-200">
          <i class="fa fa-question-circle mr-1"></i>帮助
        </button>
      </div>
      <button id="mobile-menu-btn" class="md:hidden text-neutral hover:text-primary">
        <i class="fa fa-bars text-xl"></i>
      </button>
    </div>
    <!-- 移动端菜单 -->
    <div id="mobile-menu" class="md:hidden hidden bg-white border-t border-gray-100 py-2 px-4 shadow-inner">
      <div class="flex items-center space-x-2 text-sm mb-3">
        <i class="fa fa-wifi text-green-500"></i>
        <span>已连接</span>
      </div>
      <button id="mobile-help-btn" class="flex items-center text-neutral hover:text-primary w-full py-2 transition-colors duration-200">
        <i class="fa fa-question-circle mr-2"></i>帮助
      </button>
    </div>
  </nav>

  <!-- 主内容区 -->
  <main class="flex-grow container mx-auto px-4 py-8">
    <!-- 上传区域 -->
    <section class="mb-8">
      <div id="upload-container" class="bg-white rounded-xl shadow-lg p-6 border-2 border-dashed border-gray-200 hover:border-primary transition-all duration-300 transform hover:scale-[1.01]">
        <div class="text-center mb-6">
          <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 text-primary mb-4">
            <i class="fa fa-cloud-upload text-3xl"></i>
          </div>
          <h2 class="text-xl font-semibold mb-2">上传文件到服务器</h2>
          <p class="text-neutral text-sm">拖放文件到此处，或点击选择文件</p>
        </div>
        
        <div class="flex flex-col md:flex-row gap-4">
          <!-- 文件选择 -->
          <div class="flex-grow">
            <div class="relative">
              <input type="file" id="file-input" class="hidden" multiple>
              <label for="file-input" class="block w-full py-3 px-6 bg-primary text-white rounded-lg shadow-md hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary/50 cursor-pointer transition-all duration-200 text-center">
                <i class="fa fa-file-o mr-2"></i>选择文件
              </label>
            </div>
          </div>
          
          <!-- 文件夹选择 -->
          <div class="flex-grow">
            <div class="relative">
              <input type="file" id="folder-input" class="hidden" directory webkitdirectory multiple>
              <label for="folder-input" class="block w-full py-3 px-6 bg-secondary text-white rounded-lg shadow-md hover:bg-secondary/90 focus:outline-none focus:ring-2 focus:ring-secondary/50 cursor-pointer transition-all duration-200 text-center">
                <i class="fa fa-folder-o mr-2"></i>选择文件夹
              </label>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 上传进度 -->
    <section id="upload-progress-container" class="mb-8 hidden">
      <h2 class="text-lg font-semibold mb-3 flex items-center">
        <i class="fa fa-spinner fa-spin text-primary mr-2"></i>
        上传进度
      </h2>
      <div id="upload-progress-list" class="space-y-4 max-h-80 overflow-y-auto scrollbar-hide p-2"></div>
    </section>

    <!-- 下载区域 -->
    <section>
      <div class="bg-white rounded-xl shadow-lg p-6 mb-6">
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-lg font-semibold flex items-center">
            <i class="fa fa-files-o text-primary mr-2"></i>
            文件列表
          </h2>
          <div class="flex space-x-2">
            <div class="relative">
              <input type="text" id="search-input" placeholder="搜索文件..." class="pl-9 pr-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200 w-full md:w-64">
              <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral"></i>
            </div>
            <button id="refresh-btn" class="p-2 rounded-lg border border-gray-200 text-neutral hover:bg-gray-50 hover:text-primary transition-colors duration-200">
              <i class="fa fa-refresh"></i>
            </button>
          </div>
        </div>
        
        <div class="overflow-x-auto">
          <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
              <tr>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral uppercase tracking-wider">文件名</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral uppercase tracking-wider">大小</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral uppercase tracking-wider">修改日期</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral uppercase tracking-wider">操作</th>
              </tr>
            </thead>
            <tbody id="file-list" class="bg-white divide-y divide-gray-200">
              <!-- 文件列表将通过JavaScript动态生成 -->
              <tr class="animate-pulse">
                <td colspan="4" class="px-6 py-8 text-center text-neutral">
                  <i class="fa fa-spinner fa-spin mr-2"></i>加载文件列表...
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        
        <div id="empty-file-list" class="hidden py-12 text-center">
          <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 text-neutral mb-4">
            <i class="fa fa-folder-open-o text-2xl"></i>
          </div>
          <h3 class="text-lg font-medium text-neutral-dark mb-2">暂无文件</h3>
          <p class="text-neutral text-sm">上传一些文件到服务器开始使用吧</p>
        </div>
      </div>
    </section>
  </main>

  <!-- 帮助模态框 -->
  <div id="help-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
    <div class="bg-white rounded-xl shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
      <div class="p-6 border-b border-gray-100">
        <div class="flex justify-between items-center">
          <h3 class="text-xl font-semibold">使用帮助</h3>
          <button id="close-help-btn" class="text-neutral hover:text-neutral-dark transition-colors duration-200">
            <i class="fa fa-times text-xl"></i>
          </button>
        </div>
      </div>
      <div class="p-6 space-y-4">
        <div>
          <h4 class="font-medium text-lg mb-2">如何使用本系统？</h4>
          <ol class="list-decimal list-inside space-y-2 text-neutral">
            <li>确保手机和电脑连接到同一个局域网</li>
            <li>在电脑上启动XAMPP并部署本系统</li>
            <li>获取电脑的局域网IP地址（例如：192.168.1.100）</li>
            <li>在手机浏览器中输入：http://电脑IP地址:80/文件传输系统目录</li>
            <li>在手机上选择或拖放文件上传</li>
            <li>在电脑上查看和管理文件</li>
          </ol>
        </div>
        <div>
          <h4 class="font-medium text-lg mb-2">上传文件</h4>
          <p class="text-neutral">可以通过以下两种方式上传文件：</p>
          <ul class="list-disc list-inside space-y-2 text-neutral mt-2">
            <li>点击"选择文件"按钮选择单个或多个文件上传</li>
            <li>点击"选择文件夹"按钮选择整个文件夹上传</li>
            <li>直接拖放文件到上传区域</li>
          </ul>
        </div>
        <div>
          <h4 class="font-medium text-lg mb-2">下载文件</h4>
          <p class="text-neutral">在文件列表中，点击文件右侧的下载按钮即可下载文件到本地。</p>
        </div>
        <div>
          <h4 class="font-medium text-lg mb-2">删除文件</h4>
          <p class="text-neutral">在文件列表中，点击文件右侧的删除按钮即可删除文件。删除后无法恢复，请谨慎操作。</p>
        </div>
      </div>
      <div class="p-6 border-t border-gray-100 flex justify-end">
        <button id="close-help-btn-2" class="px-6 py-2 bg-primary text-white rounded-lg shadow hover:bg-primary/90 transition-colors duration-200">
          我知道了
        </button>
      </div>
    </div>
  </div>

  <!-- 页脚 -->
  <footer class="bg-white border-t border-gray-200 py-6">
    <div class="container mx-auto px-4 text-center text-neutral text-sm">
      <p>© 2025 局域网文件传输系统 | 快速、便捷的文件共享解决方案</p>
    </div>
  </footer>

  <script>
    // 全局变量
    const uploadProgressContainer = document.getElementById('upload-progress-container');
    const uploadProgressList = document.getElementById('upload-progress-list');
    const fileList = document.getElementById('file-list');
    const emptyFileList = document.getElementById('empty-file-list');
    const mobileMenuBtn = document.getElementById('mobile-menu-btn');
    const mobileMenu = document.getElementById('mobile-menu');
    const helpBtn = document.getElementById('help-btn');
    const mobileHelpBtn = document.getElementById('mobile-help-btn');
    const helpModal = document.getElementById('help-modal');
    const closeHelpBtn = document.getElementById('close-help-btn');
    const closeHelpBtn2 = document.getElementById('close-help-btn-2');
    const refreshBtn = document.getElementById('refresh-btn');
    const searchInput = document.getElementById('search-input');
    const fileInput = document.getElementById('file-input');
    const folderInput = document.getElementById('folder-input');
    const uploadContainer = document.getElementById('upload-container');
    
    // 移动端菜单切换
    mobileMenuBtn.addEventListener('click', () => {
      mobileMenu.classList.toggle('hidden');
    });
    
    // 帮助模态框控制
    function openHelpModal() {
      helpModal.classList.remove('hidden');
      document.body.style.overflow = 'hidden';
    }
    
    function closeHelpModal() {
      helpModal.classList.add('hidden');
      document.body.style.overflow = '';
    }
    
    helpBtn.addEventListener('click', openHelpModal);
    mobileHelpBtn.addEventListener('click', openHelpModal);
    closeHelpBtn.addEventListener('click', closeHelpModal);
    closeHelpBtn2.addEventListener('click', closeHelpModal);
    
    // 点击模态框外部关闭
    helpModal.addEventListener('click', (e) => {
      if (e.target === helpModal) {
        closeHelpModal();
      }
    });
    
    // 拖放上传功能
    uploadContainer.addEventListener('dragover', (e) => {
      e.preventDefault();
      uploadContainer.classList.add('border-primary', 'bg-primary/5');
    });
    
    uploadContainer.addEventListener('dragleave', () => {
      uploadContainer.classList.remove('border-primary', 'bg-primary/5');
    });
    
    uploadContainer.addEventListener('drop', (e) => {
      e.preventDefault();
      uploadContainer.classList.remove('border-primary', 'bg-primary/5');
      
      if (e.dataTransfer.files.length > 0) {
        uploadFiles(e.dataTransfer.files);
      }
    });
    
    // 文件选择上传
    fileInput.addEventListener('change', () => {
      if (fileInput.files.length > 0) {
        uploadFiles(fileInput.files);
      }
    });
    
    // 文件夹选择上传
    folderInput.addEventListener('change', () => {
      if (folderInput.files.length > 0) {
        uploadFiles(folderInput.files);
      }
    });
    
    // 上传文件函数
    function uploadFiles(files) {
      uploadProgressContainer.classList.remove('hidden');
      
      Array.from(files).forEach(file => {
        // 创建上传进度项
        const progressItem = document.createElement('div');
        progressItem.className = 'bg-white rounded-lg shadow p-4 border border-gray-100';
        progressItem.innerHTML = `
          <div class="flex justify-between items-start mb-2">
            <div class="flex items-center">
              <i class="fa fa-file-o text-primary mr-2"></i>
              <span class="truncate max-w-[200px]">${file.name}</span>
            </div>
            <span class="text-xs text-neutral">0%</span>
          </div>
          <div class="w-full bg-gray-200 rounded-full h-2 mb-2">
            <div class="bg-primary h-2 rounded-full" style="width: 0%"></div>
          </div>
          <div class="flex justify-between text-xs text-neutral">
            <span class="upload-size">0 KB / ${formatFileSize(file.size)}</span>
            <span class="upload-speed">--</span>
          </div>
        `;
        
        uploadProgressList.appendChild(progressItem);
        
        // 创建表单数据
        const formData = new FormData();
        formData.append('file', file);
        
        // 创建XHR对象
        const xhr = new XMLHttpRequest();
        
        // 上传进度
        let startTime = new Date().getTime();
        let lastTime = startTime;
        let lastLoaded = 0;
        
        xhr.upload.addEventListener('progress', (e) => {
          if (e.lengthComputable) {
            const percentComplete = Math.round((e.loaded / e.total) * 100);
            const progressBar = progressItem.querySelector('.bg-primary');
            const percentText = progressItem.querySelector('.text-neutral:last-of-type');
            const sizeText = progressItem.querySelector('.upload-size');
            
            progressBar.style.width = `${percentComplete}%`;
            percentText.textContent = `${percentComplete}%`;
            sizeText.textContent = `${formatFileSize(e.loaded)} / ${formatFileSize(e.total)}`;
            
            // 计算上传速度
            const currentTime = new Date().getTime();
            const elapsed = (currentTime - lastTime) / 1000; // 秒
            const loadedSinceLast = e.loaded - lastLoaded;
            
            if (elapsed > 0.5) { // 每0.5秒更新一次速度
              const speed = loadedSinceLast / elapsed; // B/s
              const speedText = progressItem.querySelector('.upload-speed');
              speedText.textContent = `${formatSpeed(speed)}/s`;
              
              lastTime = currentTime;
              lastLoaded = e.loaded;
            }
          }
        });
        
        // 上传完成
        xhr.addEventListener('load', () => {
          if (xhr.status === 200) {
            const response = JSON.parse(xhr.responseText);
            if (response.success) {
              const speedText = progressItem.querySelector('.upload-speed');
              speedText.textContent = '上传完成';
              speedText.classList.add('text-green-500');
              
              // 刷新文件列表
              setTimeout(() => {
                fetchFileList();
              }, 1000);
            } else {
              const speedText = progressItem.querySelector('.upload-speed');
              speedText.textContent = `上传失败: ${response.message}`;
              speedText.classList.add('text-red-500');
            }
          } else {
            const speedText = progressItem.querySelector('.upload-speed');
            speedText.textContent = `上传失败: ${xhr.statusText}`;
            speedText.classList.add('text-red-500');
          }
          
          // 3秒后移除进度项
          setTimeout(() => {
            progressItem.style.opacity = '0';
            progressItem.style.transform = 'translateX(20px)';
            progressItem.style.transition = 'opacity 0.5s, transform 0.5s';
            
            setTimeout(() => {
              progressItem.remove();
              
              // 如果没有上传项了，隐藏进度容器
              if (uploadProgressList.children.length === 0) {
                uploadProgressContainer.classList.add('hidden');
              }
            }, 500);
          }, 3000);
        });
        
        // 上传错误
        xhr.addEventListener('error', () => {
          const speedText = progressItem.querySelector('.upload-speed');
          speedText.textContent = '上传错误';
          speedText.classList.add('text-red-500');
        });
        
        // 上传取消
        xhr.addEventListener('abort', () => {
          const speedText = progressItem.querySelector('.upload-speed');
          speedText.textContent = '上传已取消';
          speedText.classList.add('text-yellow-500');
        });
        
        // 发送请求
        xhr.open('POST', 'upload.php', true);
        xhr.send(formData);
      });
    }
    
    // 格式化文件大小
    function formatFileSize(bytes) {
      if (bytes === 0) return '0 Bytes';
      
      const k = 1024;
      const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }
    
    // 格式化速度
    function formatSpeed(bytesPerSecond) {
      if (bytesPerSecond < 1024) return bytesPerSecond.toFixed(0) + ' B';
      if (bytesPerSecond < 1024 * 1024) return (bytesPerSecond / 1024).toFixed(1) + ' KB';
      return (bytesPerSecond / (1024 * 1024)).toFixed(1) + ' MB';
    }
    
    // 获取文件列表
    function fetchFileList() {
      const xhr = new XMLHttpRequest();
      xhr.open('GET', 'list_files.php', true);
      
      xhr.onload = function() {
        if (xhr.status === 200) {
          const files = JSON.parse(xhr.responseText);
          renderFileList(files);
        } else {
          fileList.innerHTML = `
            <tr>
              <td colspan="4" class="px-6 py-4 text-center text-red-500">
                获取文件列表失败: ${xhr.statusText}
              </td>
            </tr>
          `;
        }
      };
      
      xhr.onerror = function() {
        fileList.innerHTML = `
          <tr>
            <td colspan="4" class="px-6 py-4 text-center text-red-500">
              获取文件列表失败: 网络错误
            </td>
          </tr>
        `;
      };
      
      xhr.send();
    }
    
    // 渲染文件列表
    function renderFileList(files) {
      if (files.length === 0) {
        fileList.innerHTML = '';
        emptyFileList.classList.remove('hidden');
        return;
      }
      
      emptyFileList.classList.add('hidden');
      fileList.innerHTML = '';
      
      files.forEach(file => {
        const row = document.createElement('tr');
        row.className = 'hover:bg-gray-50 transition-colors duration-150';
        
        // 格式化日期
        const date = new Date(file.mtime * 1000);
        const formattedDate = date.toLocaleString();
        
        row.innerHTML = `
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="flex items-center">
              <div class="flex-shrink-0 h-8 w-8 flex items-center justify-center rounded bg-primary/10 text-primary">
                <i class="fa fa-${getFileIcon(file.name)}"></i>
              </div>
              <div class="ml-4">
                <div class="text-sm font-medium text-neutral-dark">${file.name}</div>
              </div>
            </div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            <div class="text-sm text-neutral">${formatFileSize(file.size)}</div>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral">
            ${formattedDate}
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
            <div class="flex space-x-2">
              <a href="download.php?file=${encodeURIComponent(file.name)}" class="text-primary hover:text-primary/80 transition-colors duration-200" title="下载">
                <i class="fa fa-download"></i>
              </a>
              <button class="delete-btn text-red-500 hover:text-red-700 transition-colors duration-200" data-file="${file.name}" title="删除">
                <i class="fa fa-trash"></i>
              </button>
            </div>
          </td>
        `;
        
        fileList.appendChild(row);
      });
      
      // 添加删除事件监听
      document.querySelectorAll('.delete-btn').forEach(btn => {
        btn.addEventListener('click', () => {
          const fileName = btn.getAttribute('data-file');
          if (confirm(`确定要删除文件 "${fileName}" 吗？此操作无法撤销。`)) {
            deleteFile(fileName);
          }
        });
      });
    }
    
    // 获取文件图标
    function getFileIcon(fileName) {
      const ext = fileName.split('.').pop().toLowerCase();
      
      const imageExts = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'];
      const videoExts = ['mp4', 'avi', 'mkv', 'mov', 'wmv', 'flv'];
      const audioExts = ['mp3', 'wav', 'ogg', 'flac', 'aac'];
      const docExts = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt'];
      const codeExts = ['html', 'css', 'js', 'json', 'php', 'py', 'java', 'c', 'cpp', 'h', 'hpp'];
      const archiveExts = ['zip', 'rar', '7z', 'tar', 'gz'];
      
      if (imageExts.includes(ext)) return 'file-image-o';
      if (videoExts.includes(ext)) return 'file-video-o';
      if (audioExts.includes(ext)) return 'file-audio-o';
      if (docExts.includes(ext)) return 'file-text-o';
      if (codeExts.includes(ext)) return 'file-code-o';
      if (archiveExts.includes(ext)) return 'file-archive-o';
      if (ext === 'folder') return 'folder-o';
      
      return 'file-o';
    }
    
    // 删除文件
    function deleteFile(fileName) {
      const xhr = new XMLHttpRequest();
      xhr.open('POST', 'delete_file.php', true);
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      
      xhr.onload = function() {
        if (xhr.status === 200) {
          const response = JSON.parse(xhr.responseText);
          if (response.success) {
            fetchFileList();
            showNotification('文件已成功删除', 'success');
          } else {
            showNotification(`删除文件失败: ${response.message}`, 'error');
          }
        } else {
          showNotification(`删除文件失败: ${xhr.statusText}`, 'error');
        }
      };
      
      xhr.onerror = function() {
        showNotification('删除文件失败: 网络错误', 'error');
      };
      
      xhr.send(`file=${encodeURIComponent(fileName)}`);
    }
    
    // 显示通知
    function showNotification(message, type = 'info') {
      const notification = document.createElement('div');
      notification.className = `fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 transform transition-all duration-500 translate-y-20 opacity-0`;
      
      let bgColor, textColor, icon;
      
      switch(type) {
        case 'success':
          bgColor = 'bg-green-500';
          textColor = 'text-white';
          icon = 'fa-check-circle';
          break;
        case 'error':
          bgColor = 'bg-red-500';
          textColor = 'text-white';
          icon = 'fa-exclamation-circle';
          break;
        case 'warning':
          bgColor = 'bg-yellow-500';
          textColor = 'text-white';
          icon = 'fa-exclamation-triangle';
          break;
        default:
          bgColor = 'bg-primary';
          textColor = 'text-white';
          icon = 'fa-info-circle';
      }
      
      notification.classList.add(bgColor, textColor);
      notification.innerHTML = `
        <div class="flex items-center">
          <i class="fa ${icon} mr-2"></i>
          <span>${message}</span>
        </div>
      `;
      
      document.body.appendChild(notification);
      
      // 显示通知
      setTimeout(() => {
        notification.classList.remove('translate-y-20', 'opacity-0');
      }, 10);
      
      // 3秒后隐藏通知
      setTimeout(() => {
        notification.classList.add('translate-y-20', 'opacity-0');
        
        setTimeout(() => {
          notification.remove();
        }, 500);
      }, 3000);
    }
    
    // 搜索功能
    searchInput.addEventListener('input', () => {
      const searchTerm = searchInput.value.toLowerCase().trim();
      const rows = fileList.querySelectorAll('tr');
      
      if (!rows.length) return;
      
      let hasResults = false;
      
      rows.forEach(row => {
        const fileName = row.querySelector('td:first-child .text-neutral-dark').textContent.toLowerCase();
        if (fileName.includes(searchTerm)) {
          row.classList.remove('hidden');
          hasResults = true;
        } else {
          row.classList.add('hidden');
        }
      });
      
      if (!hasResults) {
        emptyFileList.classList.remove('hidden');
        emptyFileList.querySelector('h3').textContent = '未找到匹配的文件';
      } else {
        emptyFileList.classList.add('hidden');
      }
    });
    
    // 刷新按钮
    refreshBtn.addEventListener('click', () => {
      refreshBtn.classList.add('animate-spin');
      fetchFileList();
      
      setTimeout(() => {
        refreshBtn.classList.remove('animate-spin');
      }, 1000);
    });
    
    // 导航栏滚动效果
    window.addEventListener('scroll', () => {
      const nav = document.querySelector('nav');
      if (window.scrollY > 10) {
        nav.classList.add('py-2');
        nav.classList.remove('py-3');
      } else {
        nav.classList.add('py-3');
        nav.classList.remove('py-2');
      }
    });
    
    // 初始化
    document.addEventListener('DOMContentLoaded', () => {
      fetchFileList();
      
      // 尝试获取本地IP地址（在实际环境中可能无法直接获取）
      try {
        const connectionStatus = document.getElementById('connection-status');
        connectionStatus.innerHTML = `
          <i class="fa fa-wifi text-green-500 mr-1"></i>
          <span>已连接</span>
        `;
      } catch (e) {
        console.error('无法获取网络信息:', e);
      }
    });
  </script>
</body>
</html>
    